<meta charset="utf-8">
<div onclick="window.open('../ljw/zcxq.html');" id="mainbackup" style="width:100%;height:100%"></div>
<script src="../westjs/echarts.min.js"></script>
<script src="../westjs/world.js"></script>
<!--添加全局申请ip-->
    <script src="../gobal_ip/gobal_ip.js" type="text/javascript"></script>
<script>
var myChartBackup = echarts.init(document.getElementById('mainbackup'));
var geoCoordMap1 = {		
	//'数据中心A':[121.48,31.22],		
	//'数据中心B':[-97,38],		
	'数据中心C':[-55,-10],		
	//'数据中心D':[100,60],		
	//'数据中心E':[42,43.5],
	'广州': [113.5107,23.2196]
};
var geoCoordMap2 = {		
	'数据中心A':[121.48,31.22],		
	//'数据中心B':[-97,38],		
	//'数据中心C':[-55,-10],		
	//'数据中心D':[100,60],		
	//'数据中心E':[42,43.5],
	'伦敦': [-0.127758,51.507351]
};
var geoCoordMap3 = {		
	//'数据中心A':[121.48,31.22],		
	//'数据中心B':[-97,38],		
	//'数据中心C':[-55,-10],		
	'数据中心D':[100,60],		
	//'数据中心E':[42,43.5],
	'伦敦': [-0.127758,51.507351]
};
var geoCoordMap4 = {		
	//'数据中心A':[121.48,31.22],		
	'数据中心B':[-97,38],		
	//'数据中心C':[-55,-10],		
	//'数据中心D':[100,60],		
	//'数据中心E':[42,43.5],
	'广州': [113.5107,23.2196]
};
var geoCoordMap5 = {		
	//'数据中心A':[121.48,31.22],		
	//'数据中心B':[-97,38],		
	//'数据中心C':[-55,-10],		
	//'数据中心D':[100,60],		
	'数据中心E':[42,43.5],
	'伦敦': [-0.127758,51.507351]
};

var GZData1 = [
	//[{name:'广州'},{name:'数据中心A',value:19}],
	//[{name:'广州'},{name:'数据中心B',value:29}],
	[{name:'广州'},{name:'数据中心C',value:180}]
	//[{name:'广州'},{name:'数据中心D',value:49}],
	//[{name:'广州'},{name:'数据中心E',value:10}]
];
var GZData2 = [
	[{name:'伦敦'},{name:'数据中心A',value:29}]
	//[{name:'广州'},{name:'数据中心B',value:29}],
	//[{name:'广州'},{name:'数据中心C',value:80}],
	//[{name:'广州'},{name:'数据中心D',value:49}],
	//[{name:'广州'},{name:'数据中心E',value:10}]
];
var GZData3 = [
	//[{name:'伦敦'},{name:'数据中心A',value:19}],
	//[{name:'广州'},{name:'数据中心B',value:29}],
	//[{name:'广州'},{name:'数据中心C',value:80}],
	[{name:'伦敦'},{name:'数据中心D',value:149}]
	//[{name:'广州'},{name:'数据中心E',value:10}]
];
var GZData4 = [
	//[{name:'伦敦'},{name:'数据中心A',value:19}],
	[{name:'广州'},{name:'数据中心B',value:129}]
	//[{name:'广州'},{name:'数据中心C',value:80}],
	//[{name:'伦敦'},{name:'数据中心D',value:49}]
	//[{name:'广州'},{name:'数据中心E',value:10}]
];
var GZData5 = [
	//[{name:'伦敦'},{name:'数据中心A',value:19}],
	//[{name:'广州'},{name:'数据中心B',value:29}],
	//[{name:'广州'},{name:'数据中心C',value:80}],
	//[{name:'伦敦'},{name:'数据中心D',value:49}]
	[{name:'伦敦'},{name:'数据中心E',value:310}]
];

var convertData1 = function (data) {
	var res = [];
	for (var i = 0; i < data.length; i++) {
		var dataItem = data[i];
		var fromCoord = geoCoordMap1[dataItem[0].name];
		var toCoord = geoCoordMap1[dataItem[1].name];
		if (fromCoord && toCoord) {
			res.push({
				fromName: dataItem[0].name,
				toName: dataItem[1].name,
				coords: [fromCoord, toCoord]
			});
		}
	}
	return res;
};
var convertData2 = function (data) {
	var res = [];
	for (var i = 0; i < data.length; i++) {
		var dataItem = data[i];
		var fromCoord = geoCoordMap2[dataItem[0].name];
		var toCoord = geoCoordMap2[dataItem[1].name];
		if (fromCoord && toCoord) {
			res.push({
				fromName: dataItem[0].name,
				toName: dataItem[1].name,
				coords: [fromCoord, toCoord]
			});
		}
	}
	return res;
};
var convertData3 = function (data) {
	var res = [];
	for (var i = 0; i < data.length; i++) {
		var dataItem = data[i];
		var fromCoord = geoCoordMap3[dataItem[0].name];
		var toCoord = geoCoordMap3[dataItem[1].name];
		if (fromCoord && toCoord) {
			res.push({
				fromName: dataItem[0].name,
				toName: dataItem[1].name,
				coords: [fromCoord, toCoord]
			});
		}
	}
	return res;
};
var convertData4 = function (data) {
	var res = [];
	for (var i = 0; i < data.length; i++) {
		var dataItem = data[i];
		var fromCoord = geoCoordMap4[dataItem[0].name];
		var toCoord = geoCoordMap4[dataItem[1].name];
		if (fromCoord && toCoord) {
			res.push({
				fromName: dataItem[0].name,
				toName: dataItem[1].name,
				coords: [fromCoord, toCoord]
			});
		}
	}
	return res;
};
var convertData5 = function (data) {
	var res = [];
	for (var i = 0; i < data.length; i++) {
		var dataItem = data[i];
		var fromCoord = geoCoordMap5[dataItem[0].name];
		var toCoord = geoCoordMap5[dataItem[1].name];
		if (fromCoord && toCoord) {
			res.push({
				fromName: dataItem[0].name,
				toName: dataItem[1].name,
				coords: [fromCoord, toCoord]
			});
		}
	}
	return res;
};

var series = [];
[['广州', GZData1]].forEach(function (item, i) {
	series.push(
	{
		type: 'lines',
		zlevel: 1,
		effect: {
			show: true,
			period: 6,
			trailLength: 0.9,
			color: 'blue',
			symbolSize: 5
		},
		lineStyle: {
			normal: {
				color: "red",
				width: 0,
				curveness: 0.2
			}
		},
		data: convertData1(item[1])
	},
	{
		type: 'lines',
		zlevel: 2,
		effect: {
			show: true,
			period: 6,
			trailLength: 0
			
		},
		lineStyle: {
			normal: {
				color: "red",
				width: 1,
				opacity: 0.7,
				curveness: 0.2
			}
		},
		data: convertData1(item[1])
	},
	{
		type: 'effectScatter',
		coordinateSystem: 'geo',
		zlevel: 2,
		rippleEffect: {
			brushType: 'stroke'
		},
		label: {
			normal: {
				show: true,
				position: 'right',
				formatter: '{b}'
			}
		},
		symbol:'circle',
		symbolSize: function (val) {
			return val[2] / 8;
		},
		itemStyle: {
			normal: {
				color: "#BF0060"
			}
		},
		data: item[1].map(function (dataItem) {
			return {
				name: dataItem[1].name,
				value: geoCoordMap1[dataItem[1].name].concat([dataItem[1].value])
			};
		})
	});
	
});
[['伦敦', GZData2]].forEach(function (item, i) {
	series.push(
	{
		type: 'lines',
		zlevel: 1,
		effect: {
			show: true,
			period: 6,
			trailLength: 0.9,
			color: 'blue',
			symbolSize: 5
		},
		lineStyle: {
			normal: {
				color: "red",
				width: 0,
				curveness: 0.2
			}
		},
		data: convertData2(item[1])
	},
	{
		type: 'lines',
		zlevel: 2,
		effect: {
			show: true,
			period: 6,
			trailLength: 0
			
		},
		lineStyle: {
			normal: {
				color: "red",
				width: 1,
				opacity: 0.7,
				curveness: 0.2
			}
		},
		data: convertData2(item[1])
	},
	{
		type: 'effectScatter',
		coordinateSystem: 'geo',
		zlevel: 2,
		rippleEffect: {
			brushType: 'stroke'
		},
		label: {
			normal: {
				show: true,
				position: 'right',
				formatter: '{b}'
			}
		},
		symbol:'rect',
		symbolSize: function (val) {
			return val[2] / 8;
		},
		itemStyle: {
			normal: {
				color: "#8600FF"
			}
		},
		data: item[1].map(function (dataItem) {
			return {
				name: dataItem[1].name,
				value: geoCoordMap2[dataItem[1].name].concat([dataItem[1].value])
			};
		})
	});
	
});
[['伦敦', GZData3]].forEach(function (item, i) {
	series.push(
	{
		type: 'lines',
		zlevel: 1,
		effect: {
			show: true,
			period: 6,
			trailLength: 0.9,
			color: 'blue',
			symbolSize: 5
		},
		lineStyle: {
			normal: {
				color: "red",
				width: 0,
				curveness: 0.2
			}
		},
		data: convertData3(item[1])
	},
	{
		type: 'lines',
		zlevel: 2,
		effect: {
			show: true,
			period: 6,
			trailLength: 0
			
		},
		lineStyle: {
			normal: {
				color: "red",
				width: 1,
				opacity: 0.7,
				curveness: 0.2
			}
		},
		data: convertData3(item[1])
	},
	{
		type: 'effectScatter',
		coordinateSystem: 'geo',
		zlevel: 2,
		rippleEffect: {
			brushType: 'stroke'
		},
		label: {
			normal: {
				show: true,
				position: 'right',
				formatter: '{b}'
			}
		},
		symbol:'triangle',
		symbolSize: function (val) {
			return val[2] / 8;
		},
		itemStyle: {
			normal: {
				color: "#743A3A"
			}
		},
		data: item[1].map(function (dataItem) {
			return {
				name: dataItem[1].name,
				value: geoCoordMap3[dataItem[1].name].concat([dataItem[1].value])
			};
		})
	});
	
});
[['广州', GZData4]].forEach(function (item, i) {
	series.push(
	{
		type: 'lines',
		zlevel: 1,
		effect: {
			show: true,
			period: 6,
			trailLength: 0.9,
			color: 'blue',
			symbolSize: 5
		},
		lineStyle: {
			normal: {
				color: "red",
				width: 0,
				curveness: 0.2
			}
		},
		data: convertData4(item[1])
	},
	{
		type: 'lines',
		zlevel: 2,
		effect: {
			show: true,
			period: 6,
			trailLength: 0
			
		},
		lineStyle: {
			normal: {
				color: "red",
				width: 1,
				opacity: 0.7,
				curveness: 0.2
			}
		},
		data: convertData4(item[1])
	},
	{
		type: 'effectScatter',
		coordinateSystem: 'geo',
		zlevel: 2,
		rippleEffect: {
			brushType: 'stroke'
		},
		label: {
			normal: {
				show: true,
				position: 'right',
				formatter: '{b}'
			}
		},
		symbol:'diamond',
		symbolSize: function (val) {
			return val[2] / 8;
		},
		itemStyle: {
			normal: {
				color: "#FF5809"
			}
		},
		data: item[1].map(function (dataItem) {
			return {
				name: dataItem[1].name,
				value: geoCoordMap4[dataItem[1].name].concat([dataItem[1].value])
			};
		})
	});
	
});
[['伦敦', GZData5]].forEach(function (item, i) {
	series.push(
	{
		type: 'lines',
		zlevel: 1,
		effect: {
			show: true,
			period: 6,
			trailLength: 0.9,
			color: 'blue',
			symbolSize: 5
		},
		lineStyle: {
			normal: {
				color: "red",
				width: 0,
				curveness: 0.2
			}
		},
		data: convertData5(item[1])
	},
	{
		type: 'lines',
		zlevel: 2,
		effect: {
			show: true,
			period: 6,
			trailLength: 0
			
		},
		lineStyle: {
			normal: {
				color: "red",
				width: 1,
				opacity: 0.7,
				curveness: 0.2
			}
		},
		data: convertData5(item[1])
	},
	{
		type: 'effectScatter',
		coordinateSystem: 'geo',
		zlevel: 2,
		rippleEffect: {
			brushType: 'stroke'
		},
		label: {
			normal: {
				show: true,
				position: 'right',
				formatter: '{b}'
			}
		},
		symbol:'pin',
		symbolSize: function (val) {
			return val[2] / 8;
		},
		itemStyle: {
			normal: {
				color: "#A5A552"
			}
		},
		data: item[1].map(function (dataItem) {
			return {
				name: dataItem[1].name,
				value: geoCoordMap5[dataItem[1].name].concat([dataItem[1].value])
			};
		})
	});
	
});

var option = {
	backgroundColor: '#fff',
   
	geo: {
		map: 'world',
		label: {
			emphasis: {
				show: false
			}
		},
		zoom:1.25,
		roam: true,
		itemStyle: {
			normal: {
				areaColor: '#fff',
				borderColor: '#111'
			},
			emphasis: {
				areaColor: 'blue'
			}
		}
	},
	series : series
};
myChartBackup.setOption(option);

</script>
